<template>
  <div>首页</div>
  <h2>{{ num }}</h2>
  <button @click="num++">修改num</button>
  <button @click="stop">停止侦听</button>
</template>
<script setup>
import { ref, watch } from 'vue'

/*
  vue2:watch:侦听器（某个值的change事件）
    data(){return {num:1}}
    watch:{
      num:{
        handler(newVal,oldVal){
          newVal:修改后的值
          oldVal:修改前的值
        },
        deep:深度侦听
        immediate:是否初次定义地就执行回调函数（默认是false）
      }
    }

  vue3: watch:侦听器（某些值的change事件）
  基本用法：
     import {watch} from 'vue'
     const num=ref(1)
     const 返回方法=watch(需要侦听的值,回调函数,配制)
     返回方法：停止侦听的方法，只要调用就停止侦听
     回调函数等效vue2的handler
     配制：{ deep:...,immediate:...,flush:'回调函数执行时机（渲染前,渲染后,修改一次执行一次）' }


*/
const num = ref(0)
const stop = watch(
  num,
  (newVal, oldVal) => {
    if (newVal === 5) {
      console.log('修改了', newVal, oldVal)
      stop()
    }
  },
  {
    immediate: true
  }
)
</script>
